<template>
	<view class="container">
		<!-- 地图容器 -->
		<view id="map" class="map"></view>
		<view class="wrapperBox">
			<view id="wrapper"></view>
		</view>
		<!-- 搜索框 -->
		<view class="search-bar">
			<image src="/static/地图搜索页面图片/图标/放大镜.png" class="search-icon" />
			<input class="search-input" type="text" v-model="searchText" placeholder="请输入搜索关键词" @confirm="onSearch" />
			<image src="/static/地图搜索页面图片/图标/关闭.png" class="close-icon" @click="clearSearch" />
		</view>
		<!-- 自我定位功能 -->
		<view class="my-location-button" @click="locateUser">
			<image src="/static/地图搜索页面图片/图标/定位.png" />
		</view>

		<!-- 底部详情卡片，当有选中的位置时显示 -->
		<view class="bottom-card" v-if="selectedLocation">
			<view class="bottom-card-content">
				<text class="location-title">{{ selectedLocation.title }}</text>
				<!-- 其他位置信息 -->
			</view>
		</view>
	</view>
</template>


<script>
	let mapObj = null; // 生成组件实例

	window.mapInit = function() { // 挂载地图实例
		mapObj = new TMap.Map("wrapper", {
			center: new TMap.LatLng(22.254515, 113.469689), // 地图初始坐标
			zoom: 14, // 缩放等级
			mapStyleId: 'style1', // 地图样式
			zoomControl: false, // 设置是否启用缩放控件
		});

		mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); // 移除缩放控件
		//mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); // 移除比例尺控件
		mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 移除旋转控件

		mapObj.on("click", function(evt) { // 地图全局事件
			// 这里是通过获取地图点击的位置，将该位置移动至中心点，后面会用上
			mapObj.setCenter(new TMap.LatLng(evt.latLng.getLat().toFixed(6), evt.latLng.getLng().toFixed(6)))
		});
	}

	export default {
		data() {
			return {
				selectedLocation: null, // 当前选中的位置详情
				key: 'LZNBZ-Q4FLZ-COJX4-ZJRLX-UX2P3-AFBLX', // 换自己的key
				searchText: '', // 用于存储搜索框内容的属性
			}
		},
		onLoad() {
			// #ifdef H5
			this.loadScrpit();
			// #endif
		},
		created() {},
		methods: {
			// 初始化
			loadScrpit() { // 挂载js
				var script = document.createElement('script');
				script.src =
					`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=visualization&callback=mapInit`;
				document.body.appendChild(script);
			},
			locateUser() { //定位到我的位置
				// 检查浏览器是否支持地理定位
				if ("geolocation" in navigator) {
					navigator.geolocation.getCurrentPosition((position) => {
						// 获取当前位置的经纬度
						const userLocation = {
							lat: position.coords.latitude,
							lng: position.coords.longitude
						};

						// 将地图中心移动到当前位置
						if (mapObj) {
							mapObj.setCenter(new TMap.LatLng(userLocation.lat, userLocation.lng));
							// 如果需要，也可以在这里添加一个标记
							//new TMap.Marker({
							//map: mapObj,
							//position: new TMap.LatLng(userLocation.lat, userLocation.lng)
							//});
						}
					}, (error) => {
						console.error("Geolocation failed: " + error.message);
					}, {
						enableHighAccuracy: true // 请求更精确的位置
					});
				} else {
					console.error("您的定位暂不可用");
				}
			},
			clearSearch() {
				// 清除搜索输入框中的文本
				this.searchText = '';
			},
			onSearchConfirm(event) {
				const keyword = event.target.value;
				// 这里调用腾讯地图的搜索API，下面的代码只是示意，需要替换为实际的API调用
				// 假设你已经有了一个方法来进行搜索并返回结果
				this.searchLocation(keyword).then(results => {
					this.searchResults = results; // 假设返回的是一个结果数组
					// 更新地图标记点
					this.markers = results.map(result => ({
						id: result.id,
						latitude: result.location.lat,
						longitude: result.location.lng,
						title: result.title,
						// ...其他标记点数据
					}));
					// 如果需要，可以将地图视野移动到第一个搜索结果的位置
					if (this.markers.length > 0) {
						this.setMapCenter(this.markers[0].latitude, this.markers[0].longitude);
					}
				}).catch(error => {
					console.error('搜索失败', error);
					// 处理错误情况
				});
			},
			searchLocation(keyword) {
				// 这个方法应该返回一个Promise，它进行API调用并处理返回的结果
				// 这里需要使用腾讯地图的搜索服务API
				return new Promise((resolve, reject) => {
					// 模拟API调用
					setTimeout(() => {
						resolve([ /* 模拟的搜索结果数据 */ ]);
					}, 1000);
				});
			},
			setMapCenter(latitude, longitude) {
				// 假设有一个方法可以设置地图的中心点
				if (mapObj) {
					mapObj.setCenter(new TMap.LatLng(latitude, longitude));
				}
			},
		}
	}
</script>

<style>
	@import '../../src/assets/scss/地图搜索页面/map.scss';
</style>